<template>
  <div id="admin" class="content">
    <el-container>
        <el-aside width="200px">
            <div class="admin-logo">
                <img src="http://www.dosing100.com/dosingNew/img/logo.png" alt="加载失败">
            </div>
            <el-menu :default-active="nowPage" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="1" @click="$route.path != '/admin/classification' ? $router.push('/admin/classification') : ''">
                    <i class="el-icon-menu"></i>
                    <span slot="title">分类管理</span>
                </el-menu-item>
                <el-menu-item index="2" @click="$route.path != '/admin/shop' ? $router.push('/admin/shop') : ''">
                    <i class="el-icon-s-shop"></i>
                    <span slot="title">店铺管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view/>
        </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
    name: 'admin',
    data(){
        return {
            nowPage: '1'
        }
    },
    methods: {
        // 判断当前路由
        judgmentNowPage(){
            if(this.$route.path == "/admin/shop" && this.nowPage != '2'){
                this.nowPage = '2'
            }
            if(this.$route.path == "/admin/classification" && this.nowPage != '1'){
                this.nowPage = '1'
            }
        }
    },
    mounted(){
        this.judgmentNowPage()
    }
}
</script>

<style lang="scss" scoped>
.admin-logo{
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
    img{
        width: 80%;
        height: 80%;
        margin-top: 6px;
    }
}
.el-aside{
    overflow: hidden;
}
.el-container{
    height: 100%;
}
.el-menu{
    height: 100%;
}

.el-main{
    padding: 0;
    margin: 0;
}
</style>